<template>
  <div class="code-view">
    <textarea :spellcheck="false" @onchange="onChange" v-model="configCode" />
  </div>
</template>

<script>
import mixin from "./mixin";
export default {
  mixins: [mixin],
  methods: {
    onChange() {
      console.info(this.config);
    },
  },
  computed: {
    configCode() {
      return JSON.stringify(this.config || {}, null, 2);
    },
  },
};
</script>
<style lang="less" scoped>
.code-view {
  background: #dedede;
  padding: 12px;
  font-size: 20px;
  color: #333;
  height: 100%;
  textarea {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    :focus {
      border: none;
    }
  }
}
</style>
